import './Scss/TestData.scss'
import { Column } from '@ant-design/plots'
import { useState, useRef, useEffect } from 'react'
import { useRequest, useSize, useBoolean, useEventEmitter } from 'ahooks'
import { Select } from 'antd'
import { Http } from '../../../../Common/Api'
import { CaretDownOutlined } from '@ant-design/icons'
import { TestNameMapping, TestTypeMapping } from '../../../../Common/Configure/CommonParameter'
import { LargeScreenTablesModal } from '../LargeScreen/LargeScreenModal'
import { ModalBox } from '../../../../Common/Modal/ModalBox'

export const TestData001 = ({ LabList, title, opgType }) => {
    const BoxCharts = useRef()
    const size = useSize(BoxCharts)
    const [ActiveOne, setActiveOne] = useState()
    const [ActiveTwo, setActiveTwo] = useState()
    const [TabsOne, setTabsOne] = useState([])
    const [TabsTwo, setTabsTwo] = useState([])
    const [OneData, setOneData] = useState([])
    const [TwoData, setTwoData] = useState([])
    const { runAsync: getOrganizationsA } = useRequest(Http, { manual: true })
    const { runAsync: getOrganizationsB } = useRequest(Http, { manual: true })
    const { runAsync: getConstructionLabDataStatA } = useRequest(Http, { manual: true })
    const { runAsync: getConstructionLabDataStatB } = useRequest(Http, { manual: true })

    useEffect(() => {
        getOrganizationsA({ url: 'getOrganizations', data: { OrgType: opgType?.A || 4 } }).then(({ list }) => {
            let data = list.map(({ uuid, tableName }) => ({ label: tableName, value: uuid }))
            setActiveOne(list[0]?.uuid)
            setTabsOne(data)
        })
    }, [getOrganizationsA, opgType])

    useEffect(() => {
        getOrganizationsB({ url: 'getOrganizations', data: { OrgType: opgType?.B || 6 } }).then(({ list }) => {
            let data = list.map(({ uuid, tableName }) => ({ label: tableName, value: uuid }))
            setActiveTwo(list[0]?.uuid)
            setTabsTwo(data)
        })
    }, [getOrganizationsB, opgType])

    const [ChartsOne, setChartsOne] = useState()
    const [ChartsTwo, setChartsTwo] = useState()

    useEffect(() => {
        if (size) {
            const { width, height } = size
            const configOne = {
                data: OneData,
                color: 'l(90) 0:rgba(176, 254, 246, 1) 1:rgba(176, 254, 246, 0.4)',
                autoFit: false,
                width,
                height,
                maxColumnWidth: 14,
                appendPadding: 16,
                xField: 'type',
                yField: '试验次数',
                xAxis: {
                    label: { style: { fill: '#B2FBFD' } },
                    line: { style: { stroke: '#B2FBFD' } },
                    tickLine: { style: { stroke: '#B2FBFD' } },
                },
                yAxis: {
                    title: { text: '组', position: 'end', autoRotate: false, offset: 55, style: { fill: '#B2FBFD' } },
                    tickCount: 5,
                    label: { style: { fill: '#B2FBFD' }, formatter: e => e },
                    grid: { line: { style: { stroke: 'rgba(178, 251, 253, 0.2)', lineDash: [8, 2] } } },
                },
                scrollbar: {
                    type: 'horizontal',
                    height: 8,
                    categorySize: 80,
                    style: {
                        trackColor: 'rgba(178, 251, 253, 0.2)',
                        thumbColor: 'rgba(178, 251, 253, 0.6)',
                        thumbHighlightColor: '#B2FBFD',
                    },
                },
            }
            setChartsOne(configOne)
        }
    }, [OneData, size])

    useEffect(() => {
        if (size) {
            const { width, height } = size
            const configTwo = {
                data: TwoData,
                color: 'l(90) 0:rgba(255, 218, 138, 1) 1:rgba(255, 218, 138, 0.4)',
                autoFit: false,
                width,
                height,
                maxColumnWidth: 14,
                appendPadding: 16,
                xField: 'type',
                yField: '试验次数',
                xAxis: {
                    label: { style: { fill: '#B2FBFD' } },
                    line: { style: { stroke: '#B2FBFD' } },
                    tickLine: { style: { stroke: '#B2FBFD' } },
                },
                yAxis: {
                    title: { text: '组', position: 'end', autoRotate: false, offset: 55, style: { fill: '#B2FBFD' } },
                    tickCount: 5,
                    label: { style: { fill: '#B2FBFD' }, formatter: e => e },
                    grid: { line: { style: { stroke: 'rgba(178, 251, 253, 0.2)', lineDash: [8, 2] } } },
                },
                scrollbar: {
                    type: 'horizontal',
                    height: 8,
                    categorySize: 80,
                    style: {
                        trackColor: 'rgba(178, 251, 253, 0.2)',
                        thumbColor: 'rgba(178, 251, 253, 0.6)',
                        thumbHighlightColor: '#B2FBFD',
                    },
                },
            }
            setChartsTwo(configTwo)
        }
    }, [TwoData, size])

    useEffect(() => {
        if (ActiveOne)
            getConstructionLabDataStatA({
                url: 'getConstructionGetlabDataStatByOrg',
                data: {
                    OrganizationUuid: ActiveOne,
                    LabType: LabList,
                },
            }).then(res =>
                setOneData(
                    Object.keys(res).map(item => ({
                        type: TestNameMapping[item].title,
                        试验次数: res[item],
                        uuid: TestNameMapping[item].uuid,
                        OrganizationUuid: ActiveOne,
                    })),
                ),
            )
    }, [ActiveOne, getConstructionLabDataStatA, LabList])

    useEffect(() => {
        if (ActiveTwo)
            getConstructionLabDataStatB({
                url: 'getConstructionGetlabDataStatByOrg',
                data: {
                    OrganizationUuid: ActiveTwo,
                    LabType: LabList,
                },
            }).then(res =>
                setTwoData(
                    Object.keys(res).map(item => ({
                        type: TestNameMapping[item].title,
                        试验次数: res[item],
                        uuid: TestNameMapping[item].uuid,
                        OrganizationUuid: ActiveTwo,
                    })),
                ),
            )
    }, [ActiveTwo, getConstructionLabDataStatB, LabList])

    const [TowModal, { setTrue, setFalse }] = useBoolean(false)
    const [ParameterTitle, setParameterTitle] = useState()
    const [Parameter, setParameter] = useState()
    const [OptionsCall, setOptionsCall] = useState()
    const ExperimentalThrEvent = useEventEmitter()
    ExperimentalThrEvent.useSubscription(res => setOptionsCall(res))

    return (
        <div className="TestData001">
            <div>
                <div className="TitleSmall">
                    <div>{title ? title[0] : 'Z+B试验数据'} </div>
                    <div />
                </div>
                <div className="Tabs">
                    <Select
                        value={ActiveTwo}
                        style={{ width: '100%' }}
                        options={TabsTwo}
                        suffixIcon={<CaretDownOutlined style={{ color: 'white' }} />}
                        onChange={e => setActiveTwo(e)}
                    />
                </div>
                <div className="Charts">
                    {ChartsTwo && (
                        <Column
                            {...ChartsTwo}
                            onReady={plot =>
                                plot.on('plot:click', e => {
                                    const { x, y } = e
                                    const [{ data }] = plot.chart.getTooltipItems({ x, y })
                                    setParameter({
                                        uuid: data.OrganizationUuid,
                                        type: 'LargeScreeTable',
                                        classification: TestTypeMapping[data.uuid].label,
                                    })
                                    setParameterTitle(TestTypeMapping[data.uuid].title)
                                    setTrue()
                                })
                            }
                        />
                    )}
                </div>
            </div>
            <div>
                <div className="TitleSmall">
                    <div> {title ? title[1] : 'A试验数据'} </div>
                    <div />
                </div>
                <div className="Tabs">
                    <Select
                        value={ActiveOne}
                        style={{ width: '100%' }}
                        options={TabsOne}
                        suffixIcon={<CaretDownOutlined style={{ color: 'white' }} />}
                        onChange={e => setActiveOne(e)}
                    />
                </div>
                <div className="Charts" ref={BoxCharts}>
                    {ChartsOne && (
                        <Column
                            {...ChartsOne}
                            onReady={plot =>
                                plot.on('plot:click', e => {
                                    const { x, y } = e
                                    const [{ data }] = plot.chart.getTooltipItems({ x, y })
                                    setParameter({
                                        uuid: data.OrganizationUuid,
                                        type: 'LargeScreeTable',
                                        classification: TestTypeMapping[data.uuid].label,
                                    })
                                    setParameterTitle(TestTypeMapping[data.uuid].title)
                                    setTrue()
                                })
                            }
                        />
                    )}
                </div>
            </div>
            {TowModal && Parameter && ParameterTitle && (
                <LargeScreenTablesModal
                    className="ItemTitle"
                    Off={setFalse}
                    title={ParameterTitle}
                    parameter={Parameter}
                    ExperimentalThrEvent={ExperimentalThrEvent}
                />
            )}
            <ModalBox OptionsCall={OptionsCall} />
        </div>
    )
}

export const TestData002 = ({ LabType }) => {
    const ChartsBox = useRef()
    const size = useSize(ChartsBox)
    const { runAsync: getConstructionLabDataStatA } = useRequest(Http, { manual: true })
    const [Data, setData] = useState([])
    const [ChartData, setChartData] = useState()

    useEffect(() => {
        getConstructionLabDataStatA({
            url: 'getConstructionGetlabDataStatByOrg',
            data: { LabType },
        }).then(res =>
            setData(
                Object.keys(res).map(item => ({
                    type: TestNameMapping[item].title,
                    试验次数: res[item],
                    uuid: TestNameMapping[item].uuid,
                    OrganizationUuid: '64ed4d71-117b-4a27-a6b9-8b7285993284',
                })),
            ),
        )
    }, [LabType, getConstructionLabDataStatA])

    useEffect(() => {
        if (size) {
            const { width, height } = size
            const config = {
                data: Data,
                autoFit: false,
                width,
                height: height,
                appendPadding: 16,
                maxColumnWidth: 14,
                xField: 'type',
                yField: '试验次数',
                color: '#24C4FF',
                xAxis: {
                    label: { style: { fill: 'white' } },
                    line: { style: { stroke: '#3BACE9' } },
                    tickLine: { style: { stroke: '#3BACE9' } },
                },
                yAxis: {
                    title: { text: '组', position: 'end', autoRotate: false, offset: 50, style: { fill: 'white' } },
                    tickCount: 5,
                    label: { style: { fill: '#3BACE9' } },
                    grid: { line: { style: { stroke: 'rgba(178, 251, 253, 0.2)', lineDash: [8, 2] } } },
                },
            }
            setChartData(config)
        }
    }, [Data, size])
    const [TowModal, { setTrue, setFalse }] = useBoolean(false)
    const [ParameterTitle, setParameterTitle] = useState()
    const [Parameter, setParameter] = useState()
    const [OptionsCall, setOptionsCall] = useState()

    const ExperimentalThrEvent = useEventEmitter()
    ExperimentalThrEvent.useSubscription(res => setOptionsCall(res))

    return (
        <div className="TestData002" ref={ChartsBox}>
            {ChartData && (
                <Column
                    {...ChartData}
                    onReady={plot =>
                        plot.on('plot:click', e => {
                            const { x, y } = e
                            const [{ data }] = plot.chart.getTooltipItems({ x, y })
                            setParameter({
                                type: 'LargeScreeTable',
                                classification: TestTypeMapping[data.uuid].label,
                                other: { project: true },
                            })
                            setParameterTitle(TestTypeMapping[data.uuid].title)
                            setTrue()
                        })
                    }
                />
            )}
            {TowModal && Parameter && ParameterTitle && (
                <LargeScreenTablesModal
                    className="ItemTitle"
                    Off={setFalse}
                    title={ParameterTitle}
                    parameter={Parameter}
                    ExperimentalThrEvent={ExperimentalThrEvent}
                />
            )}
            <ModalBox OptionsCall={OptionsCall} />
        </div>
    )
}
